﻿<!DOCTYPE html>
<html lang="en">
<head>
    <title id='Description'>This demo illustrates the basic functionality of jqxDataTable. jqxDataTable is built to easily replace your HTML Tables. It can read and display the data from your HTML Table, but it can also display data from different data sources like XML, JSON, Array, CSV or TSV.
    </title>
	<meta name="description" content="JavaScript dataTable Initialization from Table example" />   	    		
    <link rel="stylesheet" href="../../jqwidgets/styles/jqx.base.css" type="text/css" />
    <script type="text/javascript" src="../../scripts/jquery-1.11.1.min.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxcore.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdata.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxbuttons.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxscrollbar.js"></script>
    <script type="text/javascript" src="../../jqwidgets/jqxdatatable.js"></script>
    <script type="text/javascript" src="../sampledata/generatedata.js"></script>
    <script type="text/javascript" src="../../scripts/demos.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {            
            $("#table").jqxDataTable(
            {
                altRows: true,
                sortable: true,
                editable: true,
                selectionMode: 'singleRow',
                columns: [
                  { text: 'First Name', dataField: 'First Name', width: 200 },
                  { text: 'Last Name', dataField: 'Last Name', width: 200 },
                  { text: 'Product', dataField: 'Product', width: 250 },
                  { text: 'Unit Price', dataField: 'Price', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'c2' },
                  { text: 'Quantity', dataField: 'Quantity', width: 100, align: 'right', cellsAlign: 'right', cellsFormat: 'n' }
                ]
            });
        });
    </script>
</head>
<body class='default'>
    <table id="table" border="1">
        <thead>
            <tr>
                <th align="left">First Name</th>
                <th align="left">Last Name</th>
                <th align="left">Product</th>
                <th align="right">Price</th>
                <th align="right">Quantity</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>Ian</td>
                <td>Devling</td>
                <td>Espresso Truffle</td>
                <td>$1.75</td>
                <td>8</td>
            </tr>
            <tr>
                <td>Nancy</td>
                <td>Wilson</td>
                <td>Cappuccino</td>
                <td>$5.00</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Cheryl</td>
                <td>Nodier</td>
                <td>Caffe Americano</td>
                <td>$2.50</td>
                <td>4</td>
            </tr>
            <tr>
                <td>Martin</td>
                <td>Saavedra</td>
                <td>Caramel Latte</td>
                <td>$3.80</td>
                <td>11</td>
            </tr>
            <tr>
                <td>Guylene</td>
                <td>Bjorn</td>
                <td>Green Tea</td>
                <td>$1.50</td>
                <td>8</td>
            </tr>
            <tr>
                <td>Andrew</td>
                <td>Burke</td>
                <td>Caffe Espresso</td>
                <td>$3.00</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Regina</td>
                <td>Murphy</td>
                <td>White Chocolate Mocha</td>
                <td>$3.60</td>
                <td>6</td>
            </tr>
            <tr>
                <td>Michael</td>
                <td>Murphy</td>
                <td>Caramel Latte</td>
                <td>$3.80</td>
                <td>2</td>
            </tr>
            <tr>
                <td>Petra</td>
                <td>Bein</td>
                <td>Caffe Americano</td>
                <td>$2.50</td>
                <td>7</td>
            </tr>
            <tr>
                <td>Nancy</td>
                <td>Nodier</td>
                <td>Caffe Latte</td>
                <td>$4.50</td>
                <td>10</td>
            </tr>
            <tr>
                <td>Peter</td>
                <td>Devling</td>
                <td>Green Tea</td>
                <td>$1.50</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Beate</td>
                <td>Saylor</td>
                <td>Espresso con Panna</td>
                <td>$3.25</td>
                <td>3</td>
            </tr>
            <tr>
                <td>Shelley</td>
                <td>Nodier</td>
                <td>Peppermint Mocha Twist</td>
                <td>$4.00</td>
                <td>7</td>
            </tr>
            <tr>
                <td>Nancy</td>
                <td>Murphy</td>
                <td>Peppermint Mocha Twist</td>
                <td>$4.00</td>
                <td>1</td>
            </tr>
            <tr>
                <td>Lars</td>
                <td>Wilson</td>
                <td>Caffe Espresso</td>
                <td>$3.00</td>
                <td>11</td>
            </tr>
        </tbody>
    </table>
</body>
</html>
